<template>
	<view class="uni-container">
		<view class="uni-margin-wrap">
			<!-- 广告轮播 -->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<image class="banner" mode="aspectFill" src="http://img.tiantue.com:8080/images/2019-06-18/9410c33c214247ba9015f4c6e958858f20190618164820.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image class="banner" mode="aspectFill" src="http://img.tiantue.com:8080/images/2019-06-18/291560c94db84a71b39d746ff7f70c7020190618164810.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image class="banner" mode="aspectFill" src="http://img.tiantue.com:8080/images/2019-06-04/d6bbea64d17d4164823d1a15f8f9b8ab3.jpg"></image>
				</swiper-item>
			</swiper>
			<!-- 菜单 -->
			<swiper class="swiper-category" circular :indicator-dots="indicatorDots">
				<swiper-item class="swiper-item" v-for="(array,index) in categorys" :key="index">
					<view class="category-item" v-for="(item,index1) in array" :key="item.categoryId" @tap="tocategoryList(item)">
						<image class="item-image" :src="item.image"></image>
						<label class="item-title" v-text="item.categoryName">家庭保洁</label>
					</view>
				</swiper-item>
				
			</swiper>
			<!-- 滚动列表 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y orderScroView"
			                @scroll="scroll" :scroll-with-animation="scrollAnimation" show-scrollbar="false">
				<view id="demo1" class="scroll-view-item uni-bg-white order-item" v-for="(li, key) in orderList" :key="key">
					<text class="item-text" style="background: #09BB07;">{{li.orderCode}}</text>
					<text class="item-text" style="background: #0A98D5;">{{li.orderItemInfos[0].goodsName}}{{li.serviceTypeName}}</text>
					<text class="item-text" style="background: #8A6DE9;">{{li.createTime}}</text>
				</view>
				
			</scroll-view>
			<!-- 中间图 -->
			<view class="mid-banner">
				<image mode="aspectFill" class="left-img" src="../../../static/img/home/home_pictrue03.png"></image>
				<view class="right-view">
					<image mode="aspectFill" class="right-img" src="../../../static/img/home/home_pictrue01.png"></image>
					<image mode="aspectFill" class="right-img" src="../../../static/img/home/home_pictrue02.png"></image>
				</view>
			</view>
			<!-- 即刻到 -->
			<view class="mid-category-title" style="padding: 8rpx;">
				<h1>即刻到</h1>
				<text style="color: #555555;font-size: 24rpx;">最快30分钟上门</text>
			</view>
			
			<!-- 即刻到服务分类 -->
			<view>
                <scroll-view class="service-scrollview" scroll-x="true" @scroll="scroll">
                    <view class="service-scrollview-item" v-for="li in serviceCategory" :key="li.categoryId">
						<!-- <image class="service-category-img" :src="li.image"></image> -->
						<!-- <view>
							<text class="service-category-text" v-text="li.categoryName">cdfdf</text>
						</view> -->
						<view style="width: 150rpx;height: 90rpx;"><image class="service-category-img" :src="li.image"></image></view>
						<view style="width: 150rpx;height: 30rpx;"><text class="service-category-text" v-text="li.categoryName"></text></view>
					</view>
                </scroll-view>
            </view>
		</view>
	</view>	
</template>
<script>
	export default {
		data() {
			return {
				categorys:[],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				orderList:[],
				scrollTop:0,
				oldScrollTop:0,
				scrollAnimation:false,//禁止滚动动画，否则无法正常调用滚动事件获取滚动距离
				serviceCategory:[],
			}
		},
		computed:{
			// 计算型属性
			// scrollViewHeight: function () {
			//       // `this` 指向 vm 实例
			//       return this.orderList.length*50;
			//     }
			
		},
		onLoad() {
			// 菜单数据请求
			uni.request({
			    url: 'http://tt.tiantue.com/tiantue/public/app/index/getGoodsCategory',
			    success: (res) => {
			        // console.log(res.data);
					// this.categorys = res.data.data;
					// console.log(this.categorys);
					this.changeArray(res.data.data);
			        // this.text = 'request success';
			    }
			});
			
			// 滚动列表数据请求
			uni.request({
			    url: 'http://tt.tiantue.com/tiantue/order/banner', 
				data:{
					pageNum:"1",
					pageSize:"50",
				},
			    success: (res) => {
					this.orderList = res.data.data.list;
					// this.orderList.push(res.data.data.list);
					// this.orderList.push(res.data.data.list);
					// this.orderList.push(res.data.data.list);
			    }
			});
			
			// 即刻到 服务类型数据请求
			uni.request({
			    url: 'http://tt.tiantue.com/tiantue/public/app/index/getCategory', 
			    success: (res) => {
					this.serviceCategory = res.data.data;
			    }
			});
			
			
		},
		onReady() {
			// 计时器实现订单滚动（这种方式的列表滚动影响，影响其他点击事件，需要用其他方案实现）
			// setInterval(() =>{
				
			// 	if(this.oldScrollTop != 0 && this.oldScrollTop != this.scrollTop){
			// 		this.scrollTop = 0;
			// 		return;
			// 	}
			// 	this.scrollTop += 1;
			// },100)
		},
		onShareAppMessage() {
			return {
				title: '欢迎体验uni-app',
				path: '/pages/tabBar/extUI/extUI'
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/about/about'
			});
		},
		methods: {
			// 一维转二维数组
			changeArray(arr) {
				let itemNum = 10.0;//数组元素个数
				let page = Math.ceil(arr.length/itemNum);
				let res = [];
				for (let i = 0; i < page; i++) {
				    // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
				    let temp = arr.slice(i*itemNum, i*itemNum+itemNum);
				    res.push(temp);
				  }
				this.categorys = res;
			},
			scroll(e) {
						// console.log("调用scroll--"+ e.detail.scrollTop);
			            this.oldScrollTop = e.detail.scrollTop;
			        },	
						
			tocategoryList(e){
				uni.navigateTo({
					url:'../../categorys/categoryList?categoryId='+e.categoryId+'&categoryName='+e.categoryName
				})
			}
					
		}
	}
</script>

<style>
	@import '../../../common/uni-nvue.css';
	
	.uni-container{
		display: flex;
		flex: 1;
		padding: 0;
	}
	.uni-margin-wrap {
		/* width:750rpx; */
		flex: 1;
	}
	.swiper {
		height: 350rpx;
	}
	.banner{
		width: 750rpx;
		height: 350rpx;
	}
	.item{
		width: 150rpx;
		height: 80rpx;
	}
	/* 分类 */
	.swiper-category{
		padding: 8rpx 0rpx 0rpx;
		height: 300rpx;
	}
	.swiper-item {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}
	.category-item{
		display: flex;
		width: 150rpx;
		height: 150rpx;
		flex-direction: column;
		align-items: center;
	}
	.item-image{
		width: 80rpx;
		height: 80rpx;
	}
	.item-title{
		text-align: center;
	}
	/* 分类 */
	/* 滚动订单 */
	.orderScroView{
		height: 300rpx;
	}
	.order-item{
		display: flex;
		height: 50rpx;
		flex-direction: row;
		justify-content: space-between;
	}
	.item-text{
		flex: 1;
		height: 50rpx;
		overflow:hidden;/*隐藏超出的内容*/
		text-align: center;
		text-overflow: ellipsis;/*超出内容显示省略号*/
	}
	/* 滚动订单 */
	
	/* 中间图片 */
	.mid-banner{
		display: flex;
		padding: 8rpx 8rpx 8rpx 8rpx;
		height: 350rpx;
	}
	.left-img{
		flex: 1;
		width: 375rpx;
		height: 334rpx;
	}
	.right-view{
		display: flex;
		width: 367rpx;
		flex-direction: column;
		height: 334rpx;
	}
	.right-img{
		flex: 1;
		width: 367rpx;
		overflow: hidden;
	}
	/* 中间图片 */
	
	/* 即刻到 */
	.mid-category-title{
		display: flex;
		justify-content: space-between;
		border-bottom:1rpx solid #D8D8D8;
		/* border-color: #999999; */
		
	}	
	
	/* 服务分类 */
	.service-scrollview{
		margin-top: 8rpx;
		/* display: flex; */
		height: 150rpx;
		white-space: nowrap;
		width: 750rpx;
	}
	.service-scrollview-item{
		
		display: inline-block;
		width: 150rpx;
		height: 130rpx;
		line-height: 150rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.service-category-img{
		width: 80rpx;
		height: 80rpx;
	}
	.service-category-text{
		text-align: center;
		overflow: hidden;
	}
	
	
</style>